import React, { Component } from "react";
import { Button, Col, message, Popconfirm, Row } from "antd";
import { RollbackOutlined } from "@ant-design/icons";
import "./ExamInfoAside.less";
import { connect } from "dva";
import { getCookie } from "@/utils/cookie/cookie";
import { updateExamByExamId } from "@/services/exam"

const mapDispatchToProps = (dispatch) => {
    return {
        changeExamListTab(examListTab) {
            dispatch({
                type: `teacher/changeState`,
                result: { data: examListTab },
                field: "examListTab",
            });
        },
        changeUpdateExam(field, data) {
            dispatch({
                type: "updateExam/change",
                field,
                data
            })
        }
    };
};
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            canEdit: false,
            status: '',
            btnLoading: false
        };
    }

    componentDidMount() {
        const { info } = this.props
        if (info) {
            if (info?.status === "notStart" ||
                info?.status === "cancel") {
                this.setState({
                    status: info.status,
                    canEdit: true
                })
            } else {
                this.setState({
                    status: info.status,
                    canEdit: false
                })
            }
        } else {
            this.props.changeExamListTab()
        }
    }

    render() {
        const { info } = this.props
        if (!info) {
            this.props.changeExamListTab()
        }
        return (
            <div className="exam-info-aside">
                <div className="left-aside">
                    <Button
                        type="primary"
                        style={{ width: "100%" }}
                        onClick={this.props.onBack}
                    >
                        <RollbackOutlined />
                        返回
                    </Button>
                    <h3 className="title">{this.props.info?.title}</h3>
                    <Row className="row">
                        <Col span={7}>开始时间：</Col>
                        <Col span={17}>{this.props.info?.startTime}</Col>
                    </Row>
                    <Row className="row">
                        <Col span={7}>结束时间：</Col>
                        <Col span={17}>{this.props.info?.endTime}</Col>
                    </Row>
                    <Row className="row">
                        <Col span={7}>参与班级：</Col>
                        <Col span={17}>{this.props.info?.class.join('、')}</Col>
                    </Row>
                    <Row className="row">
                        <Col span={4}>满分：</Col>
                        <Col span={8}>{this.props.info?.maxScore}</Col>
                        <Col span={4}>及格：</Col>
                        <Col span={8}>{this.props.info?.passScore}</Col>
                    </Row>
                    {getCookie("identity") !== "student" ?
                        <div style={{ display: "flex", justifyContent: "space-around" }}>
                            {/* <Button disabled={!this.state.canEdit} onClick={() => {
                                this.props.changeUpdateExam("isUpdate", true)
                                this.props.changeUpdateExam("baseInfo", this.props.info)

                            }}>修改考试</Button> */}
                            {(() => {
                                if (this.props.showBtn !== false) {
                                    if (this.state.status === 'cancel') {
                                        return <Button loading={this.state.btnLoading} disabled={!this.state.canEdit} onClick={async () => {
                                            this.setState({
                                                btnLoading: true
                                            })
                                            const result = await updateExamByExamId({
                                                exam_id: this.props.info?.key,
                                                exam_status: 'notStart',
                                            })
                                            if (result.status === 0) {
                                                this.setState({
                                                    status: "notStart"
                                                })
                                            } else {
                                                message.error("操作失败")
                                            }
                                            this.setState({
                                                btnLoading: false
                                            })
                                        }}>恢复考试</Button>
                                    }
                                    return <Button loading={this.state.btnLoading} disabled={!this.state.canEdit} onClick={async () => {
                                        this.setState({
                                            btnLoading: true
                                        })
                                        const result = await updateExamByExamId({
                                            exam_id: this.props.info?.key,
                                            exam_status: 'cancel'
                                        })
                                        if (result.status === 0) {
                                            this.setState({
                                                status: "cancel"
                                            })
                                        } else {
                                            message.error("操作失败")
                                        }
                                        this.setState({
                                            btnLoading: false
                                        })
                                    }}>取消考试</Button>
                                } else {
                                    return null
                                }
                            })()}
                            {(() => {
                                if (this.props.showDel) {
                                    return <Popconfirm
                                        title='确定删除吗，删除后将无法恢复！'
                                        onConfirm={async () => {
                                            message.loading({
                                                key: "tip",
                                                content: '正在删除'
                                            });
                                            const result = await updateExamByExamId({
                                                exam_id: this.props.info.key,
                                                deleted: 1
                                            });
                                            if (result.status === 0) {
                                                message.success({
                                                    key: "tip",
                                                    content: '删除成功'
                                                });
                                                this.props.changeExamListTab()
                                            } else {
                                                message.error({
                                                    key: "tip",
                                                    content: '删除失败'
                                                });
                                            }
                                        }}>
                                        <Button danger onClick={() => {

                                        }}>删除考试</Button>
                                    </Popconfirm>
                                }
                            })()}
                        </div> : ""}
                </div>
                <div className="content">{this.props.children}</div>
            </div>
        );
    }
}

export default connect(null, mapDispatchToProps)(Index);
